<template>

  <div class="person">
    <h1>情况一: 监视ref定义的基本数据类型</h1>
    <h2>当前求和: {{ sum }}</h2>
    <button @click="changeSum">点我求和 + 1</button>



  </div>


</template>

<script setup lang="ts" name = 'FindYou'> // 相当于写了setup() {}
import {ref, watch} from 'vue'

//----------------数据------------------------
let sum = ref(0)

function changeSum() {
  sum.value += 1
}

//-------------------监视-------------------------
const stopWatch = watch(sum, (newValue, oldValue)=>{ // 箭头函数 也就是我就用一次 摆烂 哈哈哈
  console.log('sum变化了' + "由" + oldValue + "-->" + newValue)
  if(newValue >= 10) {
    stopWatch()
  }
})


</script>



<style scoped >
.person {
  background-color: pink;
}
button {
  margin: 0 5px;
}
</style>